.preview {
  width: 100%;
  // margin: 20px auto;
  // border-radius: 5px;
  // box-shadow: 4px 0 10px rgba(0, 21, 41, 0.08), -4px 0 10px rgba(0, 21, 41, 0.08),
  //   0 -4px 10px rgba(0, 21, 41, 0.08), 0 4px 10px rgba(0, 21, 41, 0.08);

  // &::-webkit-scrollbar {
  //   display: none;
  // }

  .preview-item {
    position: relative;
    overflow: visible !important;
    // border: 1px dashed transparent;
    cursor: move;
    &.active {
      z-index: 10;
      // border-color: var(--ant-primary-5);
      box-shadow: 0 0 10px var(--ant-primary-5);
      &.error {
        box-shadow: 0 0 10px var(--ant-error-color), 0 -1px 10px var(--ant-error-color);
      }
    }
    &.error {
      border: 1px solid var(--ant-error-color);
    }
    .preview-tool {
      position: absolute;
      top: 0;
      right: -60px;
      opacity: 0;
      animation: show 0.5s forwards;
    }
  }
  .cube-name {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    box-sizing: 0 0 10px;
    padding: 5px 20px;
    white-space: nowrap;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 4px 0 10px rgba(0, 21, 41, 0.08), -4px 0 10px rgba(0, 21, 41, 0.08),
      0 -4px 10px rgba(0, 21, 41, 0.08), 0 4px 10px rgba(0, 21, 41, 0.08);
    transform: translate(-115%, -50%);
  }
}

.cube-item-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ant-primary-5);
  background-color: var(--ant-primary-1);
}

@keyframes show {
  to {
    right: -40px;
    opacity: 1;
  }
}
.sort-drag {
  filter: drop-shadow(0 0 10px rgba(0, 21, 41, 0.2));
  &.out {
    filter: drop-shadow(0 0 10px var(--ant-error-color));
  }
}
.sort-item-placeholder {
  border: 1px dashed var(--ant-primary-5);
}
